<template>
    <div class="SearchView">
        <div class="searchTop">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-zuojiantou"></use>
            </svg>
            <input type="search" v-model="record" placeholder="陈奕迅" class="searchBox"  @keydown.enter.native="enterKey">
        </div>
        <div class="history">
            <div class="shanchu">
                <svg class="icon" aria-hidden="true" @click="shanchu">
                    <use xlink:href="#icon-shanchu"></use>
                </svg>
            </div>
            <div>
                <span class="searchSpan">历史</span>
                <span class="historyRecord" v-for="item in keyList" @click="historySearch(item)" >{{item}}</span>
            </div> 
        </div>
        <div class="musicList">
            <div class="itemList" v-for="(item,index) in searchList" :key="item.index">
                <div class="itemListLeft" @click="playMusic(index,item.id)">
                <span class="songId">{{index+1}}</span>
                <div>
                    <p>{{item.name}}</p>
                    <span v-for="item1 in item.ar">{{item1.name}}</span>
                </div>
            </div>
            <div class="itemListRight">
                <span class="bofang" v-if="item.mv!=0">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shipin"></use>
                    </svg>
                </span>
                <span class="libiao">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-31liebiao"></use>
                    </svg>
                </span>
            </div>
        </div>
        </div>
    </div>
</template>

<script>
import {getSearchMusic} from '@/request/api.js'
import ItemMusicList from '@/components/item/itemMusicList.vue';
import {mapMutations} from 'vuex'
export default {
    data() {
        return {
            record: "",
            keyList: [],
            searchList: [],
        };
    },
    methods: {
        enterKey: async function () {
            this.keyList.push(this.record);
            // console.log(this.record);
            // let name=this.record;
            // console.log(name);
            let res = await getSearchMusic(this.record);
            // console.log('获取搜索列表');
            console.log(res);
            this.searchList = res.data.result.songs;
            console.log(this.searchList);
        },
        playMusic:function(index,id){
            this.updateplayList(this.searchList),
            this.updateplayListIndex(index),
            this.updateplayId(id)
        },
        historySearch:async function(data){
            this.record=data;
            let res = await getSearchMusic(this.record);
            this.searchList = res.data.result.songs;
        },
        shanchu:function(){
            this.keyList=[]
        },
        ...mapMutations(["updateplayList","updateplayListIndex","updateplayId"])
    },
    components: { ItemMusicList }
}
</script>

<style lang="less" scoped>
.SearchView{
    width: 100%;
    height: 100%;
    .searchTop{
        margin-top: 5px;
        .icon{
            width: 25px;
            height: 25px;
            margin-left: 10px;
        }
        .searchBox{
            width: 300px;
            margin-left: 20px;
            border:none;
            border-bottom: 1px solid #ababab;
        }
    }
    .history{
        margin-top: 10px;
        margin-left: 10px;
        padding: 5px;
        position: relative;
        .shanchu{
            width: 100%;
            height: 20px;
            .icon{
                width: 20px;
                height: 20px;
                position: absolute;
                right: 10px;
            }
        
        }
        .searchSpan{
            font-size: 16px;
            font-weight: 700;
        }
        .historyRecord{
            border-radius: 15px;
            background-color: #b9a9a9;
            padding: 5px;
            margin-left: 15px;
        }

    }
    .musicList{
        margin-top: 30px;
        .itemList{
        width: 100%;
        height: 60px;
        // border: 1px solid black;
        display: flex;
        justify-content: space-between;
        .itemListLeft{
            display: flex;
            .songId{
            color: #ababad;
            font-size: 14px;
            width: 30px;
            text-align: center;
            line-height: 50px;
        }
        div{
            padding: 5px 0;
            p{
                font-size: 14px;
                font-weight: bold;
                width:200px;
                overflow: hidden; 
                white-space: nowrap; 
                text-overflow: ellipsis;
            }
            span{
                font-size: 12px;
                color: #ababad;
            }
        }
 
        }
        .itemListRight{
            .bofang{
            width: 25px;
            height: 25px;
            line-height: 50px;
            margin-right: 35px;
            .icon{
                width: 25px;
                height: 25px;
                color: #ababad;
            }
        }
        .libiao{
            width: 25px;
            height: 25px;
            line-height: 50px;
            margin-right: 10px;
            .icon{
                width: 25px;
                height: 25px;
                color: #ababad;
            }
        }
        }
        
    }
    }
}
</style>